// +server.js
import satori from "satori";
import { Resvg } from "@resvg/resvg-js";
import NotoSans from "../fonts/static/NotoSans-Regular.ttf";
import { read } from "$app/server";

const fontData = read(NotoSans).arrayBuffer();
const height = 630;
const width = 1200;

export const GET = async ({ url }) => {
  // Parse URL parameters with proper handling of &amp; entities
  let pkg, title;

  // Get the raw search string and decode HTML entities
  const rawSearch = url.search;
  const decodedSearch = rawSearch.replace(/&amp;/g, "&");

  // Create a new URLSearchParams object with the properly decoded search string
  const searchParams = new URLSearchParams(decodedSearch.startsWith("?") ? decodedSearch.slice(1) : decodedSearch);

  pkg = searchParams.get("package") || "Flowbite Svelte";
  title = searchParams.get("title") || "";

  // Debug logging (uncomment if needed)
  // console.log('Raw search:', rawSearch);
  // console.log('Decoded search:', decodedSearch);
  // console.log('Extracted package:', pkg);
  // console.log('Extracted title:', title);

  const fontSize = pkg.includes("Admin") || pkg.includes("Illustrations") ? 60 : 90;

  const html = {
    type: "div",
    props: {
      style: {
        backgroundColor: "#141630",
        height: "100%",
        width: "100%",
        display: "flex",
        textAlign: "center",
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "column",
        flexWrap: "nowrap"
      },
      children: [
        {
          type: "div",
          props: {
            style: {
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              justifyItems: "center"
            },
            children: [
              {
                type: "svg",
                props: {
                  width: 96,
                  height: 96,
                  viewBox: "0 0 96 96",
                  fill: "none",
                  xmlns: "http://www.w3.org/2000/svg",
                  children: [
                    {
                      type: "path",
                      props: {
                        d: "M73.5582 38.8281C73.3358 40.3595 72.3261 42.4399 71.1677 44.2486C69.7061 46.5309 67.3867 48.1294 64.7322 48.6845L53.0391 51.1296C51.1598 51.5226 49.4556 52.5062 48.1761 53.9365L40.5091 62.5065C39.0682 64.1171 38.0611 63.733 38.0611 61.5728C38.0436 61.6529 34.2559 71.421 44.2938 77.2108C48.1507 79.4355 53.7025 78.6362 57.5594 76.4115L77.995 64.6242C85.6375 60.216 91.0335 52.7586 92.8271 44.1261C92.898 43.7846 92.9528 43.4419 93.012 43.0995L73.5582 38.8281Z",
                        fill: "url(#paint0_linear_2768_3907)"
                      }
                    },
                    {
                      type: "path",
                      props: {
                        d: "M68.2584 27.0537C72.1153 29.2783 73.6911 32.5903 73.6911 37.0396C73.6911 37.6436 73.6436 38.2404 73.5583 38.828L81.7924 42.365L93.0121 43.0993C94.4487 34.7848 91.6333 26.2265 86.586 19.4238C82.7877 14.3045 77.9001 9.86189 72.0242 6.47262C67.2511 3.71946 62.2909 1.9055 57.3074 0.910156L51.7082 8.16118L49.9395 16.4873L68.2584 27.0537Z",
                        fill: "url(#paint1_linear_2768_3907)"
                      }
                    },
                    {
                      type: "path",
                      props: {
                        d: "M2.35055 33.1554C2.34845 33.162 2.35425 33.1639 2.35643 33.1573C2.78851 31.8614 3.33029 30.4156 4.00667 28.8711C7.53979 20.8029 14.3483 15.4219 22.7245 12.6782C31.1006 9.93467 40.2463 10.8964 47.8802 15.2996L49.9393 16.4873L57.3073 0.910235C33.8726 -3.77029 9.92159 9.9976 2.38034 33.0651C2.37674 33.0762 2.36363 33.1147 2.35055 33.1554Z",
                        fill: "url(#paint2_linear_2768_3907)"
                      }
                    },
                    {
                      type: "path",
                      props: {
                        d: "M56.7594 76.4112C52.9026 78.6359 48.1507 78.6359 44.2939 76.4112C43.7704 76.1092 43.2768 75.7697 42.81 75.4021L36.027 80.0655L30.1807 89.5128C36.6698 94.913 45.0962 96.6491 53.5167 95.6836C59.8535 94.9569 66.1484 92.9495 72.0242 89.5603C76.7974 86.8071 80.8499 83.4225 84.2045 79.6084L80.7186 71.1384L75.0784 65.8447L56.7594 76.4112Z",
                        fill: "url(#paint3_linear_2768_3907)"
                      }
                    },
                    {
                      type: "path",
                      props: {
                        d: "M42.8101 75.4019C39.8385 73.0612 38.0612 69.4711 38.0612 65.6258V65.2423V33.2168C38.0612 31.4056 38.5948 31.0978 40.1648 32.0034C37.7467 30.6086 32.1606 25.8205 25.2633 29.7989C21.4065 32.0236 18.2305 36.9342 18.2305 41.3834V64.9581C18.2305 73.7746 22.7969 82.9713 29.3832 88.8393C29.6437 89.0714 29.9134 89.2902 30.1807 89.5126L42.8101 75.4019Z",
                        fill: "url(#paint4_linear_2768_3907)"
                      }
                    },
                    {
                      type: "path",
                      props: {
                        d: "M83.7314 15.9369C83.7268 15.9318 83.7223 15.9359 83.7268 15.941C84.6342 16.9629 85.6166 18.1545 86.6173 19.512C91.8446 26.6029 93.7977 35.5839 91.988 44.2028C90.1781 52.8217 84.7717 60.2537 77.1377 64.657L75.0786 65.8447L84.2047 79.6084C99.9793 61.6728 100.02 34.0663 83.7948 16.0078C83.7871 15.9992 83.7602 15.9686 83.7314 15.9369Z",
                        fill: "url(#paint5_linear_2768_3907)"
                      }
                    },
                    {
                      type: "path",
                      props: {
                        d: "M19.0306 41.384C19.0306 36.9348 21.4065 32.8234 25.2634 30.5988C25.7869 30.2968 26.328 30.0396 26.8801 29.8195L26.2291 21.6191L21.6558 12.2368C13.7301 15.1511 7.31911 21.1739 3.94584 28.9422C1.40729 34.7882 2.9376e-05 41.2383 0 48.0167C0 53.5231 0.907647 58.7216 2.5366 63.5311L11.6217 64.75L19.0306 62.517V41.384V41.384Z",
                        fill: "url(#paint6_linear_2768_3907)"
                      }
                    },
                    {
                      type: "path",
                      props: {
                        d: "M26.88 29.8195C30.3947 28.4189 34.3955 28.6762 37.7287 30.5988L38.0612 30.7906L64.7473 46.1832C66.6194 47.263 66.4492 48.3255 64.3334 48.7679L65.8728 48.4461C67.8986 48.0225 69.7492 46.9873 71.1645 45.4787C73.5979 42.8849 74.4912 39.7555 74.4912 37.0398C74.4912 32.5905 72.1153 28.4792 68.2585 26.2546L47.8229 14.4672C40.1804 10.059 31.0179 9.11901 22.6382 11.8835C22.3067 11.9928 21.9822 12.1168 21.6558 12.2368L26.88 29.8195Z",
                        fill: "url(#paint7_linear_2768_3907)"
                      }
                    },
                    {
                      type: "path",
                      props: {
                        d: "M57.9666 94.9574C57.9733 94.956 57.9721 94.95 57.9653 94.9514C56.6259 95.2255 55.1017 95.4797 53.4247 95.6667C44.6642 96.6439 35.9025 93.8433 29.3362 87.968C22.7698 82.0927 19.0307 73.699 19.0307 64.8925L19.0306 62.5171L2.53662 63.5311C10.1967 86.1472 34.1068 99.9859 57.8734 94.9768C57.8848 94.9744 57.9247 94.9665 57.9666 94.9574Z",
                        fill: "url(#paint8_linear_2768_3907)"
                      }
                    },
                    {
                      type: "defs",
                      props: {
                        children: [
                          {
                            type: "linearGradient",
                            props: {
                              id: "paint0_linear_2768_3907",
                              x1: "60.1798",
                              y1: "71.3098",
                              x2: "69.6224",
                              y2: "38.4205",
                              gradientUnits: "userSpaceOnUse",
                              children: [
                                { type: "stop", props: { "stop-color": "#A72F09" } },
                                { type: "stop", props: { offset: "1", "stop-color": "#F83C00" } }
                              ]
                            }
                          },
                          {
                            type: "linearGradient",
                            props: {
                              id: "paint1_linear_2768_3907",
                              x1: "81.9279",
                              y1: "31.2009",
                              x2: "57.089",
                              y2: "6.44934",
                              gradientUnits: "userSpaceOnUse",
                              children: [
                                { type: "stop", props: { offset: "0", stopColor: "#F83C00" } },
                                { type: "stop", props: { offset: "1", stopColor: "#F83C00" } }
                              ]
                            }
                          },
                          {
                            type: "linearGradient",
                            props: {
                              id: "paint2_linear_2768_3907",
                              x1: "48.4931",
                              y1: "15.0634",
                              x2: "11.0227",
                              y2: "17.4312",
                              gradientUnits: "userSpaceOnUse",
                              children: [
                                { type: "stop", props: { offset: "0", stopColor: "#F83C00" } },
                                { type: "stop", props: { offset: "1", stopColor: "#F83C00" } }
                              ]
                            }
                          },
                          {
                            type: "linearGradient",
                            props: {
                              id: "paint3_linear_2768_3907",
                              x1: "45.9592",
                              y1: "85.9878",
                              x2: "79.6097",
                              y2: "76.9076",
                              gradientUnits: "userSpaceOnUse",
                              children: [
                                { type: "stop", props: { offset: "0", stopColor: "#F83C00" } },
                                { type: "stop", props: { offset: "1", stopColor: "#F83C00" } }
                              ]
                            }
                          },
                          {
                            type: "linearGradient",
                            props: {
                              id: "paint4_linear_2768_3907",
                              x1: "21.8062",
                              y1: "47.0477",
                              x2: "45.6971",
                              y2: "71.8037",
                              gradientUnits: "userSpaceOnUse",
                              children: [
                                { type: "stop", props: { offset: "0", stopColor: "#A72F09" } },
                                { type: "stop", props: { offset: "1", stopColor: "#F83C00" } }
                              ]
                            }
                          },
                          {
                            type: "linearGradient",
                            props: {
                              id: "paint5_linear_2768_3907",
                              x1: "76.3514",
                              y1: "64.9067",
                              x2: "93.0208",
                              y2: "31.3033",
                              gradientUnits: "userSpaceOnUse",
                              children: [
                                { type: "stop", props: { offset: "0", stopColor: "#F83C00" } },
                                { type: "stop", props: { offset: "1", stopColor: "#F83C00" } }
                              ]
                            }
                          },
                          {
                            type: "linearGradient",
                            props: {
                              id: "paint6_linear_2768_3907",
                              x1: "16.0916",
                              y1: "27.393",
                              x2: "7.17161",
                              y2: "60.9197",
                              gradientUnits: "userSpaceOnUse",
                              children: [
                                { type: "stop", props: { offset: "0", stopColor: "#D03504" } },
                                { type: "stop", props: { offset: "1", stopColor: "#F83C00" } }
                              ]
                            }
                          },
                          {
                            type: "linearGradient",
                            props: {
                              id: "paint7_linear_2768_3907",
                              x1: "61.6291",
                              y1: "25.7983",
                              x2: "29.0329",
                              y2: "33.9141",
                              gradientUnits: "userSpaceOnUse",
                              children: [
                                { type: "stop", props: { offset: "0", stopColor: "#A72E08" } },
                                { type: "stop", props: { offset: "1", stopColor: "#CF3403" } }
                              ]
                            }
                          },
                          {
                            type: "linearGradient",
                            props: {
                              id: "paint8_linear_2768_3907",
                              x1: "19.2203",
                              y1: "64.0702",
                              x2: "39.9976",
                              y2: "95.3241",
                              gradientUnits: "userSpaceOnUse",
                              children: [
                                { type: "stop", props: { offset: "0", stopColor: "#F83C00" } },
                                { type: "stop", props: { offset: "1", stopColor: "#F83C00" } }
                              ]
                            }
                          }
                        ]
                      }
                    }
                  ]
                }
              },
              {
                type: "div",
                props: {
                  style: {
                    fontSize,
                    fontStyle: "normal",
                    color: "white",
                    padding: "0 20px",
                    lineHeight: 1.4,
                    fontWeight: "bolder",
                    whiteSpace: "pre-wrap"
                  },
                  children: pkg
                }
              }
            ]
          }
        },
        {
          type: "div",
          props: {
            style: {
              fontSize: 70,
              fontStyle: "normal",
              letterSpacing: "-0.025em",
              color: "white",
              marginTop: 30,
              padding: "10px",
              lineHeight: 1.4,
              whiteSpace: "pre-wrap"
            },
            children: title
          }
        }
      ]
    }
  };

  const svg = await satori(html, {
    fonts: [
      {
        name: "Noto Sans",
        data: await fontData,
        style: "normal"
      }
    ],
    height,
    width
  });

  const resvg = new Resvg(svg, { fitTo: { mode: "width", value: width } });
  const image = resvg.render();

  return new Response(image.asPng(), { headers: { "content-type": "image/png" } });
};
